import React, { useEffect, useState } from 'react'
import { Button, Table, Popconfirm } from 'antd';
import { $del, $list } from '../../api/roleApi'
import AddRole from './AddRole';
import MyNotification from '../../components/MyNotification/MyNotification';
export default function Role() {
    let [roleId,setRoleId]=useState(0)
    const [open, setOpen] = useState(false);

    let [notiMsg, setNotiMsg] = useState({ type: '', description: '' })
    let [roleList, setRoleList] = useState([])
    
    useEffect(() => {
        loadList()
    }, []);
    const loadList = () => {
        $list().then(data => {
            console.log(data)
            data = data.map(r => {
                return {
                    ...r,
                    key: r.roleId
                }
            })

            setRoleList(data)
        })
    }
    // const dataSource = [
    //     {
    //       key: '1',
    //       name: '胡彦斌',
    //       age: 32,
    //       address: '西湖区湖底公园1号',
    //     },
    //     {
    //       key: '2',
    //       name: '胡彦祖',
    //       age: 42,
    //       address: '西湖区湖底公园1号',
    //     },
    //   ];

    const columns = [
        {
            title: '角色编号',
            dataIndex: 'roleId',
            // key: 'roleId',
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
            // key: 'roleName',
        },
        {
            title: '操作',
            key: 'action',
            render: (ret) => (
                <>
                <Button size='small' style={{borderColor:'orange',color:'orange'}} onClick={()=>{
                    edit(ret.roleId)
                }}>编辑</Button>
                <Popconfirm
                    title="提示"
                    description="确定删除吗?"
                    onConfirm={() => { del(ret.roleId) }}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button size='small' danger style={{marginLeft:'5px'}} >删除</Button>
                </Popconfirm>
                </>

            ),
        },
    ];
    const del = (roleId) => {
        $del({ roleId }).then(({ success, message }) => {
            if (success) {
                setNotiMsg({ type: 'success', description: message })
                loadList()
            } else {
                setNotiMsg({ type: 'error', description: message })
            }
        })

    }
    const edit=(roleId)=>{
        
        setOpen(true)
        setRoleId(roleId)
    }
    return (
        (<div>
            <div className='search'>
                <Button size="small" onClick={() => { setOpen(true) }}>
                    添加
                </Button>
            </div>
            <Table size="small" dataSource={roleList} columns={columns} />
            <AddRole open={open} setOpen={setOpen} loadList={loadList} roleId={roleId} setRoleId={setRoleId}/>
            <MyNotification notiMsg={notiMsg} />
        </div>)
    )
}
